<template>
  <div class="root">
    <div class='supergame' @click="goPath('supergame')">
      <img class="img_icon" src='~@/assets/home/supergame.png'>
    </div>
    <div class='kiwit' @click="goPath('robot-base')">
        <!-- <img src='~@/assets/home/kiwit.png'> -->
        <img class="img_icon" src='~@/assets/home/znjqr.png'>
    </div>
    <div class='ar' @click="goPath('ar')">
        <img class="img_icon" src='~@/assets/home/ar1.png'>
    </div>
    <div class='houhouwan' @click="goPath('hohoplay')">
        <!-- <img src='~@/assets/home/houhouwan.png'> -->
        <img class="img_icon" src='~@/assets/home/kc.png'>
    </div>
    <div class='double_teacher' @click="goPath('tottalk')">
        <img class="img_icon" src='~@/assets/home/ssjy.png'>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
      }
    },
    methods: {
      goPath: function (namePath) {
        // console.log('check')
        if (this.$store.state.active) {
          this.$router.push({ name: namePath })
        } else {
          alert('授权失败')
        }
      }
    }
  }
</script>

<style scoped>
.root > div {
  position: absolute;
}
.supergame {
  left: 210px;
  top: 125px;
  width: 169px;
  height: 205px;
}
.kiwit {
  left: 585px;
  top: 35px;
  width: 205px;
  height: 222px;
}
.ar {
  left: 960px;
  top: 105px;
  width: 160px;
  height: 180px;
}
.houhouwan {
  left: 850px;
  top: 380px;
  width: 150px;
  height: 173px;
}
.double_teacher {
  left: 400px;
  top: 360px;
  width: 177px;
  height: 170px;
}
</style>
